<template>
<!--    弃用！！ 原因在于虽然将冗长的输入框提取出来，但是在提交表单时对数据的整合不友好 -->
    <!-- 该组件专门用来生成有校验提示的输入框 -->

    <div id="validate-input">
        <ValidationProvider ref="validationProvider" :rules="rules" v-slot="{ errors }" :name="name">
            {{ name }}
            <span id="input-span">
                <el-input
                    :placeholder="placeholder"
                    v-model="value"
                    :show-password="showPassword">
                </el-input>
            </span>
            <!--            <input v-model="value" type="text">-->
            <el-alert
                :title="errors[0]"
                type="error"
                effect="dark"
                show-icon
                close-text="关闭"
                @close="closeAlert"
                v-show="showAlert(errors[0])">
            </el-alert>
        </ValidationProvider>
    </div>
</template>

<script>
import {ValidationProvider} from 'vee-validate';
// 引入VeeValidate的自定义规则文件
import '@/assets/utils/veeValidateRules'

export default {
    name: "validateInput",
    components: {
        ValidationProvider,
    },
    data() {
        return {
            value: "",
        }
    },
    // props: ["rules", "name", "placeholder"],
    props: {
        rules: {
            // 校验规则
            type: String,
            default: "required"
        },
        name: {
            // 输入框名称（必需）
            type: String,
            required: true
        },
        placeholder: {
            // 就是placeholder
            type: String,
            default: "请输入内容"
        },
        showPassword: {
            // 输入框是否为密码框
            type: Boolean,
            default: false
        }
    },
    methods: {
        showAlert(errMsg) {
            return typeof errMsg != "undefined" && errMsg.length > 0;
        },
        closeAlert() {
            // 关闭el-alert时将错误信息置空
            // 解决无法关闭alert的问题
            let errors = this.$refs.validationProvider.errors;
            if(typeof errors != "undefined" && errors.length > 0) {
                this.$refs.validationProvider.errors = []
            }
        }
    }
}
</script>

<style scoped>

#validate-input {
    font-family: 'huyou', serif;
    font-weight: bolder;
    font-size: large;
    text-align: center;
}

#input-span {
    margin-left: 5px;
}

.el-input {
    width: 220px;
}

.el-alert {
    margin-top: 10px;
}

</style>
